<template>
  <div>
      <!-- <User :name="userInfo.name" :job="userInfo.job" :age="userInfo.age" /> -->
      <!-- <User v-bind="userInfo" @updateUserName="changeUserName" @updateUserAge="changeUserAge" /> -->
      <User v-bind="userInfo" v-on="userEventHandler" />
 </div>
</template>
<script setup lang='ts'>
import User from '@/components/study/user.vue'
import { ref,reactive} from 'vue'

const  userInfo = reactive({
    name: 'fan',
    job: 'enginerr',
    age: 18
})

// 高级简洁的写法
const userEventHandler = {
   updateUserName(name) {
    alert(name)
   },
   updateUserAge(age) {
    alert(age)
   }
}

// 普通的写法
const changeUserName = (name) => {
    alert(name)
}

const changeUserAge = (age) => {
    alert(age)
}

</script>
<style scoped lang='scss'>
</style>